<template>
  <div class="app-container p-rel">
    <div class="container-title">待办事项</div>
    <ul class="tabs">
      <li v-for="(tab, index) in tabs" :key="index" :class="{'active': activeIndex === index}" @click="selectTab(index)">
        {{ tab }}
      </li>
    </ul>
    <jdws-table v-if="activeIndex == 0"></jdws-table>
    <ggws-table v-if="activeIndex == 1"></ggws-table>
    <ryjk-table v-if="activeIndex == 2"></ryjk-table>
    <jcbg-table v-if="activeIndex == 3"></jcbg-table>
    <pxtx-table v-if="activeIndex == 4"></pxtx-table>
    <bcjl-table v-if="activeIndex == 5"></bcjl-table>
  </div>
</template>

<script>
import formEdit from './editFrom.vue'
import jdwsTable from './jdwsTable.vue'
import ggwsTable from './ggwsTable.vue'
import ryjkTable from './ryjkTable.vue'
import jcbgTable from './jcbgTable.vue'
import pxtxTable from './pxtxTable.vue'
import bcjlTable from './bcjlTable.vue'
export default {
  name: "Info",
  components:{ formEdit, jdwsTable, ggwsTable, ryjkTable, jcbgTable, pxtxTable, bcjlTable},
  data() {
    return {
      tabs: ['监督文书', '公共卫生许可证到期提醒', '人员健康证到期提醒', '公共场所卫生检查报告', '培训提醒', '布草清洗记录提醒'],
      activeIndex: 0,
    };
  },
  created() {
  },
  methods: {
    /** tab选中*/
    selectTab(index) {
      this.activeIndex = index;
    },
  }
};
</script>


<style scoped="scoped" lang="scss">
// 清除内外边距
.tabs {
  display: flex;
  list-style-type: none;
  padding: 0;
}

.tabs li {
  cursor: pointer;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 3px;
  padding-bottom: 3px;
  border: 1px solid #1685fc;
  color:#1685fc;
  border-radius: 2px;

}

.tabs li.active {
  background-color: #1685fc;
  color: #ffffff;
}
</style>
